<template>
  <div class="user-transactions">
    <FirstCommonComp title="今日用户交易数" :value="Number(reportData.userToday)">
      <template #default>
        <v-chart :option="option"></v-chart>
      </template>
      <template #footer>
        <div>
          <span>退货率</span>
          <span class="sales">{{ reportData.returnRate }}%</span>
        </div>
      </template>
    </FirstCommonComp>
  </div>
</template>

<script setup>
import { ref,watch } from 'vue'
import FirstCommonComp from './FirstCommonComp.vue'

const props = defineProps({
  reportData: {
    type: Object,
    required: true,
  },
})

const option = ref({
  xAxis: {
    type: 'category',
    show: false,
    data: ['00:00', '03:00', '05:00', '07:00', '09:00', '11:00', '13:00', '15:00', '17:00', '19:00', '21:00', '23:00']
  },
  yAxis: {
    type: 'value',
    show: false
  },
  grid: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  tooltip: {},
  series: [
    {
      name: '实时交易量',
      data: [],
      type: 'bar',
      barWidth: '80%',
      itemStyle: {
        color: '#5470c6',
      }
    }
  ]
})

watch(() => props.reportData,(newData) => {
    option.value.series[0].data = newData.orderUserTrend
})
</script>

<style scoped></style>
